<template>
  <div class="subpage">
    <my-head title="忘记密码" :back="true"></my-head>
    <van-form @submit="onSubmit" @failed="onFail" class="form">
      <van-field
        v-model="form.username"
        name="username"
        clearable
        label="账号信息"
        placeholder="请输入者用户名"
        :rules="[{ required: true, message: '请输入者用户名' }]"
      />
      <van-field
        v-model="form.phone"
        name="phone"
        type="tel"
        clearable
        label="手机号码"
        placeholder="请输入手机号码"
        :rules="[
          { required: true, message: '请输入手机号码' },
          { pattern: reg.phone, message: '请输入有效的手机' },
        ]"
        @blur="checkPhone"
      />
      <van-field
        v-model="form.captcha"
        name="captcha"
        type="text"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[
          { required: true, message: '请输入短信验证码' },
          { pattern: reg.code, message: '请输入4位的验证码' },
        ]"
      >
        <template #button>
          <van-button
            v-if="toggle"
            @click="startSend"
            size="small"
            type="primary"
            native-type="button"
            :disabled="!flag"
            >发送验证码</van-button
          >
          <van-button size="small" v-else native-type="button" disabled
            >剩余{{ count }}S</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="form.password"
        :type="type"
        clearable
        name="password"
        label="登录密码"
        placeholder="请输入新的登录密码"
        :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
        :rules="[
          { required: true, message: '请输入新的登录密码' },
          {
            pattern: reg.pwd,
            message: '请输入6-16位数字和字符的组合密码',
          },
        ]"
        @click-right-icon="changeType"
      />
      <div style="margin: 16px" class="links">
        <p>
          <router-link class="color1" :to="{ name: 'zhuce' }"
            >没有账号,立即注册 ></router-link
          >
        </p>
        <!-- <p>
          <router-link class="color2" :to="{ name: 'forgetpass' }"
            >忘记密码?</router-link
          >
        </p> -->
      </div>
      <div style="margin: 36px 16px">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {},
      type: "password",
      toggle: true,
      flag: false,
    };
  },
  mounted() {
    if (this.$route.query.username) {
      this.form = {
        ...this.form,
        username: this.$route.query.username,
      };
    }
  },
  methods: {
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    onSubmit(value) {
      this.$ajax
        .findUser({
          ...value,
        })
        .then((res) => {
          if (res.length > 0) {
            this.$notify({ type: "success", message: "登录成功" });
            this.$router.push({ name: "mine" });
            // 存储用户信息 vuex
            this.changeUserInfo(res[0]);
          } else {
            this.ShowError("用户名或者密码不正确");
          }
        });
    },
    onFail() {
      this.$toast("请输入有效的登录信息");
    },
    startSend() {
      this.toggle = false;
      this.count--;
      timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          this.toggle = false;
        } else {
          clearInterval(timer);
          timer = null;
          this.toggle = true;
          this.count = 120;
        }
      }, 1000);
      // ajax
      // 发送验证码
      this.$ajax
        .sendCaptcha({
          phone: this.form.phone,
        })
        .then((res) => {
          if ((res.code = 200)) {
            this.$notify({ type: "success", message: "验证码发送成功" });
          } else {
            this.ShowError("发送失败");
          }
        });
    },
    checkPhone() {
      this.flag = this.reg.phone.test(this.form.phone);
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  margin-top: 20px;
  .links {
    display: flex;
    justify-content: space-between;
  }
  .color1 {
    color: rgb(247, 2, 2);
  }
  .color2 {
    color: rgb(247, 2, 2);
  }
}
</style>